<template>
    <p>
        <img
            v-if="field.value"
            :src="field.value"
            style="object-fit: cover;"
            :style="style"
            class="align-bottom rounded"
        />
        <span v-else>&mdash;</span>
    </p>
</template>

<script>
export default {
    props: ['viaResource', 'viaResourceId', 'resourceName', 'field'],
    computed: {
        style() {
            if (!this.field.indexMaxWidth) {
                return {
                    'max-width': '2em',
                    'height': 'auto',
                }
            } else {
                return {
                    'max-width': `${this.field.indexMaxWidth}px`,
                    'height': 'auto',
                }
            }
        }
    }
}
</script>
